<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>public/styles/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>public/styles/tourdetail.css" />
<link rel="stylesheet" type="text/css" href="<?php echo base_url(); ?>public/styles/jquery.fancybox-1.3.4.css" />
<script type="text/javascript" src="<?php echo base_url(); ?>public/scripts/jquery-ui.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>public/scripts/jquery.tn3lite.min.js"></script>
<script type="text/javascript" src="<?php echo base_url(); ?>public/scripts/jquery.reveal.js"></script>
<div id="content">
    <div id="bodysite">
    	<div id="searchome">
        	<?php $this->load->view("public/msearch"); ?>
        </div>
        <div id="youhere">
        	You are here : <a href="<?php echo base_url() ?>" class="gray" title="Home">Home</a>&nbsp;&raquo;&nbsp;<a href="<?php echo base_url() ?>photo-albums.html" class="gray" title="photos album">photos album</a>&nbsp;&raquo;&nbsp;<a href="<?php echo $links; ?>" class="gray" title="<?php echo $title; ?>"><?php echo $title; ?></a>
        </div>
        <script type="text/javascript">
		var currentImage;
		var currentIndex = -1;
		var interval;
		function showImage(index){
			if(index < $('#bigPic img').length){
				var indexImage = $('#bigPic img')[index]
				if(currentImage){   
					if(currentImage != indexImage ){
						$(currentImage).css('z-index',2);
						clearTimeout(myTimer);
						$(currentImage).fadeOut(250, function() {
							myTimer = setTimeout("showNext()", 3000);
							$(this).css({'display':'none','z-index':1})
						});
					}
				}
				$(indexImage).css({'display':'block', 'opacity':1});
				currentImage = indexImage;
				currentIndex = index;
				$('#thumbs li').removeClass('active');
				$($('#thumbs li')[index]).addClass('active');
			}
		}
		function showNext(){
			var len = $('#bigPic img').length;
			var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
			showImage(next);
		}
		var myTimer;
		$(document).ready(function() {
			myTimer = setTimeout("showNext()", 3000);
			showNext(); //loads first image
			$('#thumbs li').bind('click',function(e){
				var count = $(this).attr('rel');
				showImage(parseInt(count)-1);
			});
		});
		</script>
    	<div id="bodyl" style="width:670px">
            <div id="albums">
            	<div id="albums_title">
                	<h2><?php echo $detail["title"]; ?> - Photo albums</h2>
                </div>
                <div id="albums_content">
                	<div id="bigPic">
						<?php if(isset($detail)){
                            $forder = $detail['forder'];
                            $listimage = unserialize($detail['fullimage']);
                            if($listimage != NULL){
                                foreach($listimage as $image){
                                    echo "<img src='".base_url()."uploads/album/$forder/".$image."' alt='' title='' width='655' height='370' />";
                                }
                            }
                        }
                        ?>
                     </div>
                     <ul id="thumbs">
						<?php if(isset($detail)){
                            $forder = $detail['forder'];
                            $listimage = unserialize($detail['fullimage']);
                            $st=1;
                            if($listimage != NULL){
                                foreach($listimage as $image){
                                    if($st == 1){
                                        echo "<li class='active' rel='$st'><img src='".base_url()."uploads/album/$forder/".$image."' alt='' title='' /></li>";
                                    }else{
                                        echo "<li class='active' rel='$st'><img src='".base_url()."uploads/album/$forder/".$image."' alt='' title='' /></li>";
                                    }
                                    $st++;
                                }
                            }
                        }
                        ?>
                     </ul>
                </div>
            </div>
            <div class="cls"></div>
            <div id="ortheral">
            	<h2>VIEW OTHER ALBUMS</h2>
                <?php
				foreach($related as $val){
					echo "<div class='album_thum'>";
						echo "<a href='".base_url()."photo-albums/$val[rewrite]-$val[id].html'><img src='".base_url()."uploads/album/thumb/".$val['avatar']."' alt='$val[title]' title='$val[title]' /></a>";
						echo "<h3>".$val['title']."</h3>";
					echo "</div>";
				}
				?>
            </div>
        </div>
        <div id="bodyr" style="width:270px;margin-left:20px">
            <?php $this->load->view("public/guide"); ?>
            <div id="testnimo"><?php $this->load->view("public/test"); ?></div>
            <div id="news"><?php $this->load->view("public/news"); ?></div>
        </div>
        <div class="cls"></div>
    </div>
</div>